<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 3、伪元素法 ，给父元素添加这个类*/
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }


        .box {
            /* 2、给父元素添加overflow:hiden; 
            优点：代码简洁
            缺点：无法显示溢出的部分*/
            /* overflow: hidden; */
            width: 500px;
            background-color: rgb(241, 112, 112);
            border: 5px solid #4dd2f3;

        }

        .NO1 {
            float: left;
            width: 100px;
            height: 80px;
            background-color: #666666;
        }

        .NO2 {
            float: left;
            width: 100px;
            height: 80px;
            background-color: #271dad;
        }

        /* 1、清除浮动 之额外标签法  添加的盒子必须是块级元素,不推荐用这个方法，因为结构性较差*/
        /* .clear {
                clear: both;
                } */

        .footer {
            width: 400px;
            height: 300px;
            background-color: rgb(20, 19, 19);
        }
    </style>
</head>

<body>
    <!-- 有时由于需要不方便给父盒子高度时（1、父盒子没高度），
        但是子盒子浮动又不占用位置，即脱标（2、子元素浮动了），
        最后会导致父盒子高度为0，会影响下面的排版（3、影响排版），故需要清除浮动
         -->
    <div class="box clearfix">
        父盒子
        <div class="NO1"></div>
        <div class="NO2"></div>
        <!-- 下面的这个是新添加的 -->
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>

</html>